.listing-modal {
	background-color: hsla(240, 6%, 14%, 0.5);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid var(--surrealist-divider-color);

	@include light {
		background-color: white;
	}
}

.listing-body {
	padding: 0;
}

.listing-search input {
	font-size: 1.15rem;
	background-color: unset !important;

	&::placeholder {
		color: var(--mantine-color-slate-4);
	}
}

.changelog-content {

	ul,
	li {
		margin-bottom: 0;
	}

	li {
		margin-bottom: 1px;
	}
}

.update-dialog {
	background-color: var(--mantine-color-slate-9);
	border: 1px solid var(--mantine-color-slate-6);
	transition-property: transform, opacity, background-color !important;
	cursor: pointer;

	@include light {
		background-color: white;
		border-color: var(--mantine-color-slate-2);
	}
}

.update-dialog-icon {
	width: 38px;
	height: 38px;
	background: var(--surrealist-gradient);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, 0.3);
	background-origin: border-box;
}

.connection-group {
	&-remove {
		display: none;
		position: absolute;
		right: var(--mantine-spacing-xl);
	}

	&:hover &-remove {
		display: block;
	}
}

.news-drawer-content {
	transition-property: all !important;
	overflow: hidden;
	overflow: clip;
}

.news-drawer-body {
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: 0;
}

.news-post-header {
	background-position: center;
	background-size: cover;
	background-image: linear-gradient(to bottom, transparent, var(--mantine-color-body)), var(--image-url);
}

.news-post-content {
	pre {
		white-space: pre-wrap;
		background-color: var(--mantine-color-slate-9);

		@include light {
			background-color: var(--mantine-color-slate-0);
		}
	}

	code {
		background-color: unset !important;
		color: var(--mantine-color-bright) !important;
		padding: 0;
	}

	a {
		color: var(--mantine-color-surreal-5);
	}
}

.news-post-back {
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	z-index: 10;
	border-radius: var(--mantine-radius-lg);
	background-color: rgba(0, 0, 0, 0.35);
	background-clip: padding-box;
	border: 1px solid rgba(255, 255, 255, 0.3);
}

.provision-box {
	border-radius: 50%;
	box-shadow: 0 15px 25px rgba(0, 0, 0, 0.3);
}

.provision-loader::after {
	border: solid 3px transparent;
	background-image: linear-gradient(var(--mantine-color-body), var(--mantine-color-body)), var(--surrealist-gradient);
	background-origin: border-box;
	background-clip: content-box, border-box;
	animation-duration: 0.75s;
}

.provision-icon {
	z-index: 0;
	width: 32px;
	height: 32px;
	transform: translateY(1px);
}

.docs-scroller :global(.mantine-ScrollArea-viewport)>div {
	display: block !important;
}

.listing-active {
	background-color: var(--mantine-color-slate-7);

	@include light {
		background-color: var(--mantine-color-slate-1);
	}
}